<template>
	<view class="calculator-page bg-white" :style="my_style">
		<!-- 表单 -->
		<view class="form">
			<view class="txt-cell">在线报价结果仅供参考，实际审批结果请以金融服务机构为准。</view>
			<view class="cell flex">
				<view class="label">房屋面积(m²)</view>
				<input type="text" placeholder="请填写面积" v-model="caldata.area" @input="checkData" />
				<view class="small-label">以房产证为准</view>
			</view>
			<view class="cell flex">
				<view class="label">合作费用(元/m²)</view>
				<input type="text" placeholder="请填写单价" v-model="caldata.fee" @input="checkData" />
			</view>
			<view class="cell flex">
				<view class="label">预计日租金(元)</view>
				<input type="text" placeholder="请填写日租金" v-model="caldata.day" @input="checkData" />
			</view>
			<view class="diy-cell">
				<view class="label m-t-30 float-left">出租率(%)</view>
				<input class="m-t-30 float-right" type="text" placeholder="请填写出租率" v-model="caldata.chuzu+'%'" />
				<view class="clearfix"></view>
				<view class="other-input m-b-30">
					<slider value="90" min="60" max="100" @changing="sliderChange2" step="5" activeColor="#FB2D19" />
				</view>
			</view>
			<view class="cell flex">
				<view class="label">预计运营成本(元)</view>
				<input type="text" placeholder="请填写运营成本" v-model="caldata.cost" @input="checkData" />
			</view>
			<view class="cell flex">
				<view class="label">预计保底收益(元)</view>
				<input type="text" placeholder="请填写保低收益" v-model="caldata.loss" @input="checkData" />
			</view>
			<view class="cell flex">
				<view class="label">运营时间(月)</view>
				<input type="text" placeholder="请填写运营时间" v-model="caldata.time" @input="checkData" />
			</view>
			<view class="diy-cell">
				<view class="label m-t-30">分期时间(月)</view>
				<view class="other-input m-b-30 m-t-30 flex flex-between">
					<view :class="caldata.stag == 36 ? 'radiobox radioCheck' : 'radiobox'" @click="radioCleck(36)">36期</view>
					<view :class="caldata.stag == 48 ? 'radiobox radioCheck' : 'radiobox'" @click="radioCleck(48)">48期</view>
					<view :class="caldata.stag == 60 ? 'radiobox radioCheck' : 'radiobox'" @click="radioCleck(60)">60期</view>
					<view class="clearfix"></view>
				</view>
			</view>
			<!--
			<view class="diy-cell">
				<view class="label m-t-30 float-left">首付比例(%)</view>
				<input class="m-t-30 float-right" type="text" placeholder="请填写首付比例" v-model="caldata.downpay+'%'" />
				<view class="clearfix"></view>
				<view class="other-input m-b-30">
					<slider value="0" min="0" max="100" @changing="sliderChange" step="5" activeColor="#FB2D19" />
				</view>
			</view>
			-->
			
		</view>
		<view class="footer">
			<view :class="canUse ? 'footer-primary-btn' : 'footer-primary-btn footer-primary-btn-no'" @tap="jumpPage">计算收益</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "calculator",
		data() {
			return {
				caldata:{
					area:"",
					fee:"",
					day:"",
					cost:500,
					loss:"",
					time:60,
					stag:"60",
					downpay:"0",
					chuzu:"90"
				},
				canUse:false,
				show: false
			}
		},
		onLoad() {
			
		},
		methods: {
			sliderChange(e) {
				this.caldata.downpay = e.detail.value;
				this.checkData();
			},
			sliderChange2(e) {
				this.caldata.chuzu = e.detail.value;
			},
			radioCleck(e){
				this.caldata.stag = e;
				this.checkData();
			},
			checkData(){
				var caldata = this.caldata;
				var s = true;
				for(let i in caldata){
					if(i == 'downpay'){
						continue;
					}
					if(!caldata[i] || caldata[i]<=0){
						s = false;
					}
				}
				if(s){
					this.canUse = true;
				}else{
					this.canUse = false;
				}
			},
			jumpPage() {
				if(this.canUse){
					var caldata = this.caldata;
					
					var c = parseFloat(caldata.day) * 30 * (parseFloat(caldata.chuzu)/100);//预计月租金
					var a = parseFloat(caldata.loss) + (c - parseFloat(caldata.loss) - parseFloat(caldata.cost)) * 0.8;//预计每月收益
					var d = a*parseFloat(caldata.time);//预计运营期内总回报
					var f = parseFloat(caldata.area) * parseFloat(caldata.fee);//总投资
					var e = parseFloat(caldata.area) * parseFloat(caldata.fee) * (1-parseFloat(caldata.downpay)/100)/parseFloat(caldata.stag);//每月分期支出
					var b = "--";
					if(a>e){
						b = a.toFixed(2) - e.toFixed(2);
					}
					var g = caldata.day;
					var h = caldata.cost;
					var i = caldata.loss;
					var url = "/pages/user/calculatord?a="+a.toFixed(2)+"&b="+b+"&c="+c.toFixed(2)+"&d="+d.toFixed(2)+"&e="+e.toFixed(2)+"&f="+f.toFixed(2)+"&g="+g+"&h="+h+"&i="+i;
					uni.$u.route(url)
				}
			},
		}

	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.calculator-page {
		height: 100%;
		padding: 70rpx 0 444rpx;

		.form {
			.txt-cell{
				width: 90%;
				margin: 0 auto 10px auto;
				font-size: 20rpx;
				color:#999999;
			}
			.diy-cell{
				width: 90%;
				font-size: 28rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.1);
				border-radius: 10rpx;
				padding:0 10px;
				margin: 0 auto 10px auto;
				position: relative;
				overflow: hidden;
				input {
					flex: 1;
					text-align: right;
					font-size: 28rpx;
				}
				.other-input{
					width: 100%;
				}
				.radiobox{
					width: 198rpx;
					height: 60rpx;
					background: #F5F5F5;
					border-radius: 30rpx;
					text-align: center;
					line-height: 60rpx;
					color:#666666;
				}
				.radioCheck{
					background-color: rgba(0,161,168,0.1);
					color: #FB2D19;
				}
			}
			.cell {
				width: 90%;
				height: 120rpx;
				font-size: 28rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.1);
				border-radius: 10rpx;
				padding:0 10px;
				margin: 0 auto 10px auto;
				position: relative;
				overflow: hidden;
				.label {
				}
				.small-label{
					position: absolute;
					color:#999999;
					left:0;
					bottom:0;
					padding-left: 10px;
					margin: 0 auto;
				}

				input {
					flex: 1;
					text-align: right;
					font-size: 28rpx;
				}
			}
		}

		.footer {
			// padding: 144rpx 24rpx 0;

			.footer-primary-btn {
				width: 690rpx;
				height: 88rpx;
				background-color: $b;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				border-radius: 49rpx;
				margin: 70rpx auto 0;
			}
			.footer-primary-btn-no {
				background-color: #E5F5F6;
			}
		}
	}
</style>
